<template>
    <div class="xtx-pay-checkout-page">
        <div class="container">
            <!-- 面包屑 -->
            <el-breadcrumb separator-class="el-icon-arrow-right" style="padding:25px 10px; ">
                <el-breadcrumb-item to="/">首页</el-breadcrumb-item>
                <el-breadcrumb-item to="/cart">购物车</el-breadcrumb-item>
                <el-breadcrumb-item>填写订单</el-breadcrumb-item>
            </el-breadcrumb>
            <div class="wrapper">
                <!-- 收货地址 -->
                <Address :list="checkoutInfo.userAddresses" @change="changeAddress"/>
                <!-- 商品信息 -->
                <PayGoods :list="checkoutInfo.goods"/>
                <!-- 配送时间 -->
                <!-- 支付方式 -->
                <PayType/>
                <!-- 金额明细 -->
                <h3 class="box-title">金额明细</h3>
                <div class="total" v-if="checkoutInfo['summary']">
                    <dl>
                        <dt>商品件数：</dt>
                        <dd>{{checkoutInfo['summary'].goodsCount}}件</dd>
                    </dl>
                    <dl>
                        <dt>商品总价：</dt>
                        <dd>¥{{checkoutInfo['summary'].totalPrice}}</dd>
                    </dl>
                    <dl>
                        <dt>运<i></i>费：</dt>
                        <dd>¥{{checkoutInfo['summary'].postFee}}</dd>
                    </dl>
                    <dl>
                        <dt>应付总额：</dt>
                        <dd class="price">¥{{checkoutInfo['summary'].totalPayPrice}}</dd>
                    </dl>
                </div>
                <!-- 提交订单 -->
                <div class="submit">
                    <el-button type="primary" style="width: 200px;height: 50px" @click="submitOrder">提交订单</el-button>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import Address from "@/views/member/pay/components/address";
    import {createOrder, submitOrder} from "@/api/order";
    import PayGoods from "@/views/member/pay/components/pay-goods";
    import PayType from "@/views/member/pay/components/pay-type";

    export default {
        name: "XtxPayCheckoutPage",
        components: {PayType, PayGoods, Address},
        data() {
            return {
                checkoutInfo: {},
                //需要提交的字段
                requestParams: {
                    addressId: null,
                    deliveryTimeType: 1,
                    payType: 1,
                    buyerMessage: '',
                    goods: []
                }

            }
        },
        created() {
            this.createOrder()
        },
        methods: {
            async createOrder() {
                const {result} = await createOrder()
                this.checkoutInfo = result

                // 设置提交时候的商品
                this.requestParams.goods = result.goods.map(item => {
                    return {
                        skuId: item.skuId,
                        count: item.count
                    }
                })
            },
            //收货地址改变
            changeAddress(addressId) {
                this.requestParams.addressId = addressId
            },
            //提交订单
            async submitOrder() {

                if (!this.requestParams.addressId) {
                    this.$message.info('请选择收货地址')
                    return
                }
                const {result} = await submitOrder(this.requestParams)
                this.$message.success('订单提交成功')
                this.$router.push(`/member/pay?orderId=${result.id}`)
            }
        }
    }
    //http://www.corho.com:8080/#/member/pay?orderId=1479383558291197953
</script>

<style scoped lang="less">
    .xtx-pay-checkout-page {
        background: #f5f5f5;

        .wrapper {
            background: #fff;
            padding: 0 20px;
        }

        .box-title {
            margin-top: 30px;
            font-size: 16px;
            font-weight: normal;
            padding-left: 10px;
            line-height: 70px;
            border-bottom: 1px solid #f5f5f5;
        }

        .total {
            padding: 20px 0;

            dl {
                display: flex;
                justify-content: flex-end;
                line-height: 50px;

                dt {
                    i {
                        display: inline-block;
                        width: 2em;
                    }
                }

                dd {
                    width: 240px;
                    text-align: right;
                    padding-right: 70px;

                    &.price {
                        font-size: 20px;
                        color: @priceColor;
                    }
                }
            }
        }

        .submit {
            text-align: right;
            padding: 60px;
            border-top: 1px solid #f5f5f5;
        }
    }

</style>